<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>照片墙实战案例</title>
    <style>
        /* ========== 第一部分：基础重置样式 ========== */
        /* 作用：清除所有元素的默认边距和内边距，确保样式一致性 */
        * {
            margin: 0;
            padding: 0;
        }

        /* ========== 第二部分：页面布局容器 ========== */
        /* 作用：创建全屏居中布局，为照片墙提供展示空间 */
        body {
            /* 尺寸设置 */
            width: 100%;
            height: 100vh;  /* 占满整个视口高度，确保垂直居中有效 */
            
            /* Flexbox布局 - 实现页面居中 */
            display: flex;
            justify-content: center;  /* 水平居中 */
            align-items: center;      /* 垂直居中 */
            
            /* 视觉样式 */
            background-color: gainsboro;
        }

        /* ========== 第三部分：照片墙网格容器 ========== */
        /* 作用：创建响应式网格布局，自动调整列数和元素大小 */
        .wall {
            /* 尺寸控制 */
            min-width: 350px;    /* 最小宽度，确保在小屏幕上的可用性 */
            width: 80%;          /* 占父容器80%宽度，留出边距 */
            max-height: 90vh;    /* 最大高度限制，防止内容溢出 */
            
            /* 溢出处理 */
            overflow: hidden;    /* 隐藏超出容器的内容 */
            
            /* CSS Grid布局 - 核心功能 */
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            /* auto-fit: 自动调整列数
               minmax(200px, 1fr): 每列最小200px，最大等分剩余空间 */
            gap: 20px;          /* 网格间距 */
            
            /* 容器样式 */
            padding: 15px;
            background-color: white;
            border: 1px solid blueviolet;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6);
        }

        /* ========== 第四部分：照片容器样式 ========== */
        /* 作用：为每张照片提供统一的容器样式和交互效果 */
        .photo-border {
            /* 形状控制 */
            border-radius: 5px;
            aspect-ratio: 1;     /* 固定1:1宽高比，确保正方形 */
            
            /* 视觉效果 */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
            
            /* 动画过渡 */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            /* 0.3s: 动画持续时间
               ease: 缓动函数，开始慢、中间快、结束慢 */
        }

        /* ========== 第五部分：图片样式 ========== */
        /* 作用：确保图片完美适应容器，保持比例 */
        .photo-border img {
            /* 尺寸控制 */
            width: 100%;
            height: 100%;
            
            /* 图片适配 */
            object-fit: cover;   /* 保持宽高比，裁剪多余部分 */
            border-radius: 5px;  /* 与容器圆角保持一致 */
        }

        /* ========== 第六部分：悬停交互效果 ========== */
        /* 作用：提供鼠标悬停时的视觉反馈，增强用户体验 */
        .photo-border:hover {
            /* 变换效果 */
            transform: translateY(-10px);  /* 向上移动10px，产生上浮效果 */
            
            /* 阴影增强 */
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
            /* 垂直偏移增大，模糊半径增大，透明度降低 */
        }

        /* ========== 第七部分：响应式设计（可选扩展） ========== */
        /* 作用：在不同屏幕尺寸下提供最佳显示效果 */
        @media (max-width: 768px) {
            .wall {
                width: 95%;                    /* 小屏幕时增加宽度占比 */
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                gap: 15px;                     /* 减小间距 */
            }
        }

        @media (max-width: 480px) {
            .wall {
                width: 98%;
                grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
                gap: 10px;
                padding: 10px;
            }
        }
    </style>
</head>

<body>
    <!-- 照片墙容器 -->
    <div class="wall">
        <!-- 照片项目 - 使用本地图片资源 -->
        <div class="photo-border">
            <img src="./image/睡鼠.png" alt="睡鼠">
        </div>
        <div class="photo-border">
            <img src="./image/白兔.png" alt="白兔">
        </div>
        <div class="photo-border">
            <img src="./image/柴郡猫.png" alt="柴郡猫">
        </div>
        <div class="photo-border">
            <img src="./image/三月兔.png" alt="三月兔">
        </div>
        <div class="photo-border">
            <img src="./image/红后.png" alt="红后">
        </div>
        <div class="photo-border">
            <img src="./image/白后.png" alt="白后">
        </div>
        <div class="photo-border">
            <img src="./image/红心后.png" alt="红心后">
        </div>
        <div class="photo-border">
            <img src="./image/睡鼠.png" alt="睡鼠">
        </div>
        <div class="photo-border">
            <img src="./image/白兔.png" alt="白兔">
        </div>
        <div class="photo-border">
            <img src="./image/柴郡猫.png" alt="柴郡猫">
        </div>
        <div class="photo-border">
            <img src="./image/三月兔.png" alt="三月兔">
        </div>
        <div class="photo-border">
            <img src="./image/红后.png" alt="红后">
        </div>
        <div class="photo-border">
            <img src="./image/白后.png" alt="白后">
        </div>
        <div class="photo-border">
            <img src="./image/红心后.png" alt="红心后">
        </div>
    </div>
</body>
</html>